<template>
  <KrdPage>
    <view class="case-list">
      <view 
        class="case-item" 
        v-for="(item, index) in cases" 
        :key="index"
        @click="goToDetail(index)"
      >
        <image :src="item.cover" class="case-cover" mode="aspectFill" />
        <view class="case-info">
          <text class="case-title">{{ item.title }}</text>
          <text class="case-date">开工: {{ item.startDate }} 竣工: {{ item.endDate }}</text>
        </view>
      </view>
    </view>
  </KrdPage>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import KrdPage from '@/components/KrdPage.vue'

const cases = ref([
  {
    cover: '/static/case1.jpg',
    title: '某某市污水处理厂',
    startDate: '2022-01-15',
    endDate: '2022-12-20'
  },
  {
    cover: '/static/case2.jpg',
    title: '某某工业园区污水处理项目',
    startDate: '2023-03-10',
    endDate: '2023-11-30'
  },
  {
    cover: '/static/case3.jpg',
    title: '某某县乡镇污水处理站',
    startDate: '2024-02-01',
    endDate: '2024-08-15'
  }
])

// 跳转到详情页面
const goToDetail = (index: number) => {
  uni.navigateTo({
    url: `/pages/case/caseDetail?id=${index}`
  })
}
</script>

<style>
.case-list {
  width: 100%;
}

.case-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.case-cover {
  width: 100%;
  height: 300rpx;
}

.case-info {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  background-color: #fff;
}

.case-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.case-date {
  font-size: 24rpx;
  color: #666;
}
</style>